<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/dashboard' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-button
        type="text"
        @click="dialogFormVisible = true"
        style="
          background-color: #43c6ac;
          width: 50px;
          color: white;
          margin-left: 850px;
          height: 40px;
        "
        >添加</el-button
      >

      <el-dialog title="添加会员用户" :visible.sync="dialogFormVisible">
        <el-form>
          <el-radio-group v-model="sex">
            <el-radio-button label="男"></el-radio-button>
            <el-radio-button label="女"></el-radio-button>
            <el-radio-button label="保密"></el-radio-button>
          </el-radio-group>
          <el-form-item label="用户名">
            <el-input
              v-model="username"
              autocomplete="off"
              @blur="checkUname"
            ></el-input>
            <i
              class="el-icon-circle-check"
              v-show="unameStatus === 2"
              style="color: green"
            ></i>
            <i
              class="el-icon-circle-close"
              v-show="unameStatus === 1"
              style="color: red"
            ></i>
            <div style="color: red" v-show="unameStatus === 1">
              用户名校验不通过
            </div>
          </el-form-item>
          <el-form-item label="岁数">
            <el-input v-model="age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addMembers">添 加</el-button>
        </div>
      </el-dialog>
    </el-breadcrumb>
    <el-table
      :data="members"
      border
      style="width: 100%; margin-top: 20px"
      :row-class-name="tableRowClassName"
      height="450"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="username" label="姓名" width="180" sortable>
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="180" sortable>
      </el-table-column>
      <el-table-column prop="age" label="年龄" sortable> </el-table-column>
      <el-table-column prop="phone" label="手机号" sortable> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            style="margin-left: 20px"
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
            @cancel="cancel"
          >
            <el-button size="mini" type="danger" slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改用户  -->
    <el-drawer
      title="修改会员信息"
      :before-close="cancelForm"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select
              v-model="form.sex"
              placeholder="选择性别"
              style="width: 100%"
            >
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
              <el-option label="保密" value="保密"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="form.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input
              v-model="form.phone"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="handleUpdate" :loading="loading">{{
            loading ? '提交中 ...' : '确 定'
          }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import axios from '@/http/req'
import url from '@/config/url'
export default {
  data() {
    return {
      members: [],
      dialogFormVisible: false,
      username: '',
      sex: '',
      age: '',
      phone: '',
      unameStatus: 0,
      dialog: false,
      form: {
        username: '',
        sex: '',
        age: '',
        phone: ''
      },
      formLabelWidth: '80px',
      loading: false,
      members_bak:[]
    }
  },
  created() {
    this.$http.get(url.members).then((res) => {
      this.members = res.data.data
    })
  },
  methods: {
    handleUpdate() {
      axios
        .put(url.members, this.form)
        .then((res) => {
          if (res.data.code === 0) {
            this.$tip('会员信息修改成功')
            window.location.reload()
          } else {
            this.$tip('会员信息修改失败', 'erroe')
          }
        })
      this.$refs.drawer.closeDrawer()
    },
    cancelForm() {
      this.loading = false
      this.dialog = false
      this.members = this.members_bak
    },
    cancel() {},
    checkUname() {
      if (/[\u4E00-\u9FA5]+/.test(this.username)) {
        this.unameStatus = 2
      } else {
        this.unameStatus = 1
      }
    },
    addMembers() {
      if (this.unameStatus === 1) {
        alert('无法提交，请检查信息')
        return
      }
      const { username, sex, age, phone } = this
      let data = { username, sex, age, phone }
      this.dialogFormVisible = false
      axios.post(url.members, data).then((res) => {
        if (res.data.code === 0) {
          this.$tip('添加成功')
          this.members.push(data)
        } else {
          this.$tip('添加失败', 'error')
        }
      })
    },
    handleEdit(index, row) {
      this.dialog = true
      this.form = row
      this.members_bak = JSON.parse(JSON.stringify(this.members))
    },
    handleDelete(index, row) {
      console.log(row)
      axios
        .delete(url.members + '/' + row.phone)
        .then((res) => {
          if (res.data.code === 0) {
            this.$tip('删除成功')
            let arr = []
            this.members.forEach((item) => {
              if (item.phone != row.phone) {
                arr.push(item)
              }
            })
            this.members = arr
          } else {
            this.$tip('删除失败', 'error')
          }
        })
    },
    handleClose() {
      this.dialogVisible = false
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.sex === '女') {
        return 'sex1'
      } else if (row.sex === '男') {
        return 'sex2'
      } else if (row.sex === '保密') {
        return 'sex3'
      }
    }
  },
  
}
</script>

<style lang="scss" scoped>
:deep(.sex1) {
  background: #a6acbe; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to left,
    #2980b9,
    #6dd5fa,
    #a6acbe
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to left,
    #2980b9,
    #6dd5fa,
    #a6acbe
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
:deep(.sex2) {
  background: #b6fbff; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to left,
    #83a4d4,
    #b6fbff
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to left,
    #83a4d4,
    #b6fbff
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
:deep(.sex3) {
  background: #e684ae; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to left,
    #77a1d3,
    #79cbca,
    #e684ae
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to left,
    #77a1d3,
    #79cbca,
    #e684ae
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.is-scrolling-none {
  background-color: transparent !important;
}


:deep(.is-sortable){
  background-color: transparent;
}
</style>